<template>
  <div>
    <UpmsHeader></UpmsHeader>
    <a-row :style="{minHeight:height+'px'}">
      <a-col :xs="{span:4}" :sm="{span:4}" :md="{span:1}" :lg="{span:1}" :xxl="{span:1}" class="header-left"
             style="height: 100%;">
        <LeftUserInfo/>
      </a-col>
      <a-col :xs="{span:20}" :sm="{span:20}" :md="{span:4}" :lg="{span:4}" :xxl="{span:4}" class="header-left"
             style="height: 100%;">
        <LeftMenu/>
      </a-col>
      <a-col :xs="{span:24}" :sm="{span:24}" :md="{span:19}" :lg="{span:19}" :xxl="{span:19}">
        <router-view :style="{minHeight:(height - 60)+'px'}"></router-view>
      </a-col>
      <a-col span="24"><UpmsFooter/></a-col>
    </a-row>
  </div>
</template>

<script>
  import UpmsHeader from './UpmsHeader'
  import UpmsFooter from './UpmsFooter'
  import LeftMenu from './LeftMenu'
  import LeftUserInfo from './LeftUserInfo'

  export default {
    name: 'Layout',
    components: {
      UpmsHeader,
      UpmsFooter,
      LeftMenu,
      LeftUserInfo
    },
    data () {
      return {
        height: this.$store.state.screenHeight - 48,
        width: this.$store.state.screenWidth,
        iframeSrc: this.$store.state.iframeSrc
      }
    },
    watch: {
      '$store.state.screenHeight' () {
        this.height = this.$store.state.screenHeight - 48
      },
      '$store.state.iframeSrc' () {
        console.log('this.$store.state.iframeSrc', this.$store.state.iframeSrc)
        this.iframeSrc = this.$store.state.iframeSrc
      }
    }
  }
</script>

<style scoped>

</style>
